<template>
    <div>
        <Poptip trigger="hover"  placement="top">
            <Button type="ghost" @click="selectMajor">{{majorData.name}}</Button>
            <div slot="content">
                {{selectedMajorsStr}}
            </div>
        </Poptip>
        <Modal
                v-model="selectMajorModal"
                title="选择专业">
            <div v-for="majroLevel2 in majorData.subMajors">

                <Checkbox
                        :indeterminate="selectedMajors[majroLevel2.name].indeterminate"
                        :value="selectedMajors[majroLevel2.name].checkAll"
                        @click.prevent.native="handleCheckAll(majroLevel2.name)">{{majroLevel2.name}}
                </Checkbox>

                <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">

                    <CheckboxGroup v-model="selectedMajors[majroLevel2.name].checkAllGroup"
                                   @click="setCurrent(majroLevel2.name)"
                                   @on-change="checkAllGroupChange">
                        <Checkbox v-for="majorLevel3 in majroLevel2.subMajors" :label="majorLevel3.name"></Checkbox>
                    </CheckboxGroup>
                </div>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        props: ["value"],
        data() {
            return {
                majorData: {},
                currentMajorLevle2: "22",
                selectMajorModal: false,
                selectedMajors: {},
                /* majorData: {
                     name: "哲学",
                     subMajors: [{
                         name: "哲学二级-1",
                         subMajors: [
                             {name: "哲学三级1"}, {name: "哲学三级2"}
                         ]
                     }, {
                         name: "哲学二级-2",
                         subMajors: [
                             {name: "哲学三级11"}, {name: "哲学三级22"}
                         ]
                     }, {
                         name: "哲学二级-3",
                         subMajors: [
                             {name: "哲学三级111"}, {name: "哲学三级222"}
                         ]
                     }]
                 }*/
            }
        },
        computed: {
            selectedMajorsStr() {
                var selects = [];

                for(var i in this.selectedMajors){
                    if(this.selectedMajors[i].checkAllGroup.length>0){
                        selects.push(this.selectedMajors[i].checkAllGroup);
                    }
                }
                return _.join(selects,",");
            }
        },
        methods: {
            setCurrent(name) {
                this.currentMajorLevle2 = name;
            },
            selectMajor() {
                this.selectMajorModal = true;
            },
            handleCheckAll(majorLevel2Name) {
                var majorLevel2 = this.selectedMajors[majorLevel2Name];
                if (majorLevel2.indeterminate) {
                    majorLevel2.checkAll = false;
                } else {
                    majorLevel2.checkAll = !majorLevel2.checkAll;
                }
                //  majorLevel2.indeterminate = false;

                if (majorLevel2.checkAll) {
                    var g = _.values(_.filter(this.majorData.subMajors, {name: majorLevel2Name})[0].subMajors);
                    majorLevel2.checkAllGroup = _.map(g, _.property('name'));
                } else {
                    majorLevel2.checkAllGroup = [];
                }
            },
            checkAllGroupChange(data) {
                if (data.length === 3) {
                    this.indeterminate = false;
                    this.checkAll = true;
                } else if (data.length > 0) {
                    this.indeterminate = true;
                    this.checkAll = false;
                } else {
                    this.indeterminate = false;
                    this.checkAll = false;
                }
            },
        },
        created() {
            this.majorData = _.merge({}, this.value);
            var ms = {};
            for (var i in this.majorData.subMajors) {
                ms[this.majorData.subMajors[i].name] = {
                    indeterminate: true,
                    checkAll: false,
                    checkAllGroup: []
                }
            }
            this.selectedMajors = ms;


        },
        watch: {
            // 通过这种语法来watch就行，文档里有。。。看需求，还可以直接watch data，使用deep:true来深度观察
            'selectedMajors': {
                handler: function (val) {
                    for (var majorLevel2 in val) {
                        var selectedGroup = this.selectedMajors[majorLevel2].checkAllGroup;
                        var majorLevel3Data = _.map(_.filter(this.majorData.subMajors, {name: majorLevel2})[0].subMajors, _.property('name'));
                        if (_.isEqualWith(_.sortBy(selectedGroup), _.sortBy(majorLevel3Data))) {
                            this.selectedMajors[majorLevel2].indeterminate = false;
                            this.selectedMajors[majorLevel2].checkAll = true;
                        } else if (selectedGroup.length > 0) {
                            this.selectedMajors[majorLevel2].indeterminate = true;
                            this.selectedMajors[majorLevel2].checkAll = false;
                        } else {
                            this.selectedMajors[majorLevel2].indeterminate = false;
                            this.selectedMajors[majorLevel2].checkAll = false;
                        }
                    }
                    this.$emit('change', {majorName: this.majorData.name, selectedMajors: this.selectedMajorsStr});
                },
                // 深度观察
                deep: true
            }
        },
    }
</script>

<style scoped>

</style>